<template>
  <div class="app-container">
    <div class="filter-container">

    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;"
     >
      <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.month }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总计" align="center">
        <template slot-scope="{row}">
            <span> {{row.total_money}}
      </span>
          </template>
        </el-table-column>




    </el-table>


  </div>
</template>

<script>
  import {
    getMerchantSettleByMonth
  } from '@/api/finance'
  import waves from '@/directive/waves' // waves directive
  import {
    formatDate
  } from '@/utils/formatDate.js'
  import {
    parseTime
  } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'ComplexTable',
    components: {
      Pagination
    },
    directives: {
      waves
    },

    data() {
      return {
        listQuery: {

        },
        list:[],
          tableKey: 0,
listLoading:false,
      }
    },
    created() {
      this.getList()
    },
    methods: {

      getList() {
        this.listLoading = true
        getMerchantSettleByMonth(this.listQuery).then(response => {
          this.list = response.data

          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 0.2 * 1000)
        })
      }

    }
  }
</script>
